<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            @import url('reset.source.css');
            .contraner {
                width: 950px;
                margin: 10px auto;
            }

            .box {
                background: #eaeaea;
                width: 200px;
                height: 200px;
                border: 1px solid #ccc;
            }

            .trigger {
                border: 1px solid #fff;
                width: 14px;
                height: 14px;
                background: #fff url(resize.png) no-repeat center;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 99;
                cursor: se-resize;
            }
        </style>
    </head>
    <body>
        <div class="contraner">
            <textarea class="box" id="box">
                background: #eaeaea;
                width: 200px;
                height: 200px;
                border: 1px solid #ccc;
                border: 1px solid #fff;
                width: 14px;
                height: 14px;
                background: #fff url(resize.png) no-repeat center;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 99;
                cursor: se-resize;
            </textarea>
        </div>
        <!--
        <div class="trigger" id="trigger"></div>
        -->
        <script type="text/javascript" src="http://assets.taobaocdn.com/js/tbra/tbra-widgets.js"></script>
        <script type="text/javascript" src="TextareaResizer.js"></script>
        <script type="text/javascript">
            (function() {
                YAHOO.util.Event.onDOMReady(function() { 
                    var trigger = document.createElement('div');
                    YAHOO.util.Dom.addClass(trigger, 'trigger');
                    document.body.appendChild(trigger);

                    var resizer = new TB.widget.TextareaResizer('box', trigger, {
                        max: [599, 599], onScroll: function() {
                            console.info(this);
                        }
                    });

                    resizer.resizeTo('400', '200');
                }); 
            })(); 
        </script>
    </body>
</html>
